<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>hot pot 博客发布</title>
    <link rel="stylesheet" th:href="@{/plugins/hp-ui/hp-ui.css}" />
    <link rel="stylesheet" th:href="@{/css/base.css}" />
    <link rel="stylesheet" th:href="@{/css/blog/add.css}" />
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/jquery/jquery-3.4.1.min.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/ueditor/ueditor.config.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/ueditor/ueditor.all.min.js}"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/ueditor/lang/zh-cn/zh-cn.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/hp-ui/hp-ui.js}"></script>

    <script type="text/javascript">
        function validation() {
            if (!document.getElementById("type")) {
                alert("请选择文章类型")
                return false;
            }
            if (!document.getElementById("ueditor_textarea_editorValue")) {
                alert("博客内容为空，不会提交")
                return false;
            }
        }
    </script>
</head>
<body>
<header th:replace="~{fragments/header :: header}">...</header>
<article>
    <form id="case" action="/blog" method="post" onsubmit="return validation()">
        <input type="hidden" id="id" name="id" th:value="${article.id}"/>

        <div class="title-wrapper">
            <div class="hs-select-group">
                <p data-hp-id="type" th:attr="data-hp-val=${article.type}">请选择</p>
                <ul>
                    <li data-hp-val="1">Redis</li>
                    <li data-hp-val="2">Java</li>
                    <li data-hp-val="3">MySql</li>
                </ul>
            </div>
            <input type="hidden" id="type" name="type" th:value="${article.type}"/>
            <input type="text" name="title" class="hp-input"  th:value="${article.title}" placeholder="文章标题，支持200个汉字"/>
        </div>

        <div class="editor" style="min-width: 824px;margin-top:20px;min-height: 600px" id="container">
        </div>
        <div class="brief-wrapper">
            <input name="brief" type="text" class="hp-input" th:value="${article.brief}" placeholder="请填写文章摘要，最多200个字，默认为正文前200个字符">
        </div>
        <button class="hp-btn" type="submit">保存</button>
    </form>
</article>
</body>
<script th:inline="javascript">
    // 初始化编辑器
    var editor = UE.getEditor("container");
    // 自定义请求参数，UeditorController 中ueditor方法的filepath
    editor.ready(function () {
        editor.execCommand('serverparam', {
            'filepath': 'help'
        });
        // 如果是更新文档，则重新设置ueditor的内容
        /*<![CDATA[*/
        let body = [[${article.body}]];
        if (body) {
            editor.setContent(body);
        }
        /*]]>*/
    });
</script>
</html>
